<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/components/Mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '550px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getPieSeries(data, scatterData, chart) {
      const that = this
      return echarts.util.map(scatterData, function(item, index) {
        var center = chart.convertToPixel('calendar', item)
        var online = 50
        var offline = 50
        for (var i = 0; i < data.length; i++) {
          if (data[i].createdDate === item[0]) {
            online = (data[i].online / 3600).toFixed(2)
            offline = (data[i].offline / 3600).toFixed(2)
          }
        }
        return {
          id: index + 'pie',
          type: 'pie',
          center: center,
          label: {
            normal: {
              formatter: '{c}',
              position: 'inside'
            }
          },
          radius: 30,
          data: [
            { name: that.$t('ONLINE'), value: online },
            { name: that.$t('OFFLINE'), value: offline }
          ]
        }
      })
    },

    getPieSeriesUpdate(data, scatterData, chart) {
      return echarts.util.map(scatterData, function(item, index) {
        var center = chart.convertToPixel('calendar', item)
        return {
          id: index + 'pie',
          center: center
        }
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(chartData) {
      const that = this
      const scatterData = []
      for (let i = 0; i < chartData.length; i++) {
        scatterData.push([
          chartData[i].createdDate,
          Math.floor(Math.random() * 10000)
        ])
      }
      const cellSize = [90, 90]

      const range = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
      const option = {
        title: {
          text: range
        },
        legend: {
          data: [that.$t('ONLINE'), that.$t('OFFLINE')],
          bottom: 20
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        calendar: {
          top: 'middle',
          left: 'center',
          orient: 'vertical',
          cellSize: cellSize,
          yearLabel: {
            show: false
          },
          dayLabel: {
            margin: 20,
            firstDay: 1,
            nameMap: [
              that.$t('sunday'),
              that.$t('monday'),
              that.$t('tuesday'),
              that.$t('wednesday'),
              that.$t('thursday'),
              that.$t('friday'),
              that.$t('saturday')
            ]
          },
          monthLabel: {
            show: false
          },
          range: range
        },
        series: [
          {
            id: 'label',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
              normal: {
                show: true,
                formatter(params) {
                  return echarts.format.formatTime('dd', params.value[0])
                },
                offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
                textStyle: {
                  color: '#000',
                  fontSize: 14
                }
              }
            },
            data: scatterData
          }
        ]
      }

      const app = {}
      if (!app.inNode) {
        let pieInitialized
        setTimeout(function() {
          pieInitialized = true
          that.chart.setOption({
            series: that.getPieSeries(chartData, scatterData, that.chart)
          })
        }, 10)

        app.onresize = function() {
          if (pieInitialized) {
            that.chart.setOption({
              series: that.getPieSeriesUpdate(chartData, scatterData, that.chart)
            })
          }
        }
      }
      that.chart.setOption(option)
    }
  }
}
</script>
